<template>
	<view class="segment-box">
		
		<view class="segment-item" v-for="(item,index) in titles" :key="index" @tap="$emit('didSelectIndex',index)">
			<text :style="{'color':selectIndex == index ? '#FF5A00' : '#060606'}">{{item}}</text>
			<view class="segment-progress-line" v-if="selectIndex == index"></view>
		</view>
		<view class="segment-line"></view>
	</view>
</template>

<script setup>
	defineEmits(['didSelectIndex'])
	const props = defineProps({
		//当前选项下标
		selectIndex:{
			type:Number,
			default:0
		},
		//显示的内容数组
		titles:{
			type:Array,
			default:()=>{
				return ['选择省份','选择城市','选择区县']
			}
		}
	})
	
	
</script>

<style lang="scss" scoped>
.segment-box{
	display: flex;
	align-items: center;
	background-color: white;
	position: relative;
	width: 100%;
	height: 80rpx;
	box-sizing: border-box;
	.segment-line{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 1px;
		transform: scaleY(0.5);
		background-color: #eee;
	}
	.segment-item{
		display: flex;
		align-items: center;
		height: 100%;
		margin-right: 30rpx;
		position: relative;
		z-index:99;
		color: $xh-title-color;
		.segment-progress-line{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 1px;
			background-color: $xh-theme-color;
		}
	}
}
</style>